<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
	ul, li, p, h3{ margin: 0; padding: 0;}
	li{ list-style: none; }
	#wrap{width: 800px; height: 300px; border: 1px solid #000; margin: 50px auto;}
	#title{height: 30px;line-height: 30px; border-bottom: 1px solid #000;}
	#title h3{ margin-left: 30px }
	#title div, #title h3{ float: left }
	#title div{ margin-left: 30px }
	#content1{ width: 800px; height: 269px; }
	.subject img{ width: 250px; height: 250px; margin: 10px 0 0 10px;}
	.subject, .show, .main li { float: left }
	.show{ width: 520px; height: 269px; margin-left: 10px; overflow: hidden; }
	.main{ width: 1000px; height: 229px; margin-top: 10px;	}
	.main img{ width: 160px; height: 200px; margin-right: 20px;}
	.control{ width: 520px; height: 30px; text-align:center; }
	.control li{ display: inline-block; }
</style>
<script src="miaov.js"></script>
<script>
	window.onload = function(){
		var oConten1 = document.getElementById('content1')
		var oConten2 = document.getElementById('content2')
		var	aUl = oConten1.getElementsByTagName('ul') 
		var aLi1 = aUl[0].getElementsByTagName('li')
		var aLi2 = aUl[1].getElementsByTagName('li')
		var len = aLi2.length
		var timer = '';
		var onOff = true;

		aLi2[0].onclick = function(){
			
			clearInterval(timer)
			if(onOff){
				timer = setTimeout(function(){
					onOff = false;
					doMove(aUl[0],'marginLeft', 10, -180,function(){
						onOff = true;
					})
				},0)
			}
			alert(onOff)
		}

		aLi2[len-1].onclick = function(){

			clearInterval(timer)
			if(onOff){
				timer = setTimeout(function(){
					onOff = false;
					doMove(aUl[0],'marginLeft', 10, 180,function(){
						onOff = true;
					})
				},0)
			}
		}

	}
</script>

</head>

<body>
<div id="wrap">
	<div id="title">
		<h3>靓丽美女</h3>
		<div>古代</div>
		<div>现代</div>
	</div>
	<div id="content1">
		<div class="subject"><img src="img/1.jpg" alt=""></div>
		<div class="show">
			<ul class="main">
				<li><img src="img/2.png" alt=""><p>黑暗魔女</p></li>
				<li><img src="img/3.png" alt=""><p>魔幻精灵</p></li>
				<li><img src="img/4.png" alt=""><p>蒙面超人</p></li>
				<li><img src="img/5.jpg" alt=""><p>古典美女</p></li>
				<li><img src="img/6.png" alt=""><p>美女在哪</p></li>
			</ul>
			<ul class="control">
				<li><</li>
				<li>o</li>
				<li>o</li>
				<li>o</li>
				<li>o</li>
				<li>o</li>
				<li>></li>
			</ul>
		</div>
	</div>
	<div id="content2" style="display: none">
		<div class="subject"><img src="img/10.jpg" alt=""></div>
		<div class="show">
			<ul class="main">
				<li><img src="img/11.jpg" alt=""><p>毛衣女子</p></li>
				<li><img src="img/12.jpg" alt=""><p>嘟嘴少女</p></li>
				<li><img src="img/13.jpg" alt=""><p>拍照精灵</p></li>
				<li><img src="img/14.jpg" alt=""><p>阳光美女</p></li>
			</ul>
			<ul class="control">
				<li><</li>
				<li>o</li>
				<li>o</li>
				<li>o</li>
				<li>o</li>
				<li>></li>
			</ul>
		</div>
	</div>
</div>
</body>
</html>
